<template>
  <div class="container">
    <h1 class="title">bug详情</h1>
    <img :src="img" @click="showPic" class="showpicclass" v-if="pics" alt="截图地址" width="500" height="500">
    <el-table
      :data="dataList"
      border
      style="width: 70%;margin:0 auto;margin-top:50px;">
      <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        width="200"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="b_u_name"
        header-align="center"
        align="center"
        label="发起人">
      </el-table-column>
      <el-table-column
        prop="bugs_title"
        header-align="center"
        align="center"
        label="bug标题">
      </el-table-column>
      <el-table-column
        prop="bugs_description"
        header-align="center"
        align="center"
        width="180"
        label="bug描述">
      </el-table-column>
      
      <el-table-column
        prop="ansPer"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        label="修复人">
      </el-table-column>
      <el-table-column
        prop="status"
        header-align="center"
        align="center"
        label="目前状态">
      </el-table-column>
      <el-table-column
        prop="ip"
        header-align="center"
        fixed="right"
        align="center"
        width="250"
        label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="medium" @click="showEdit">回复</el-button>
          <el-button v-if="img" type="danger" size="medium" @click="showPic">显示bug截图</el-button>
        </template>
      </el-table-column>
      <!-- 截图显示弹框 -->
    </el-table>
    <h1 class="title">修改记录</h1>
    <el-row>
        <el-table 
            :data="modify" 
            highlight-current-row 
            layout="total, prev, pager, next"
            style="width: 70%;margin:0 auto;margin-top:50px;">
            <el-table-column prop="bl_id" label="日志编号" width="120" sortable>
            </el-table-column>
            <el-table-column prop="bl_bid" label="bug编号" width="140" sortable>
            </el-table-column>
            <el-table-column prop="bl_uid" label="修改人编号" width="140" sortable>
            </el-table-column>
            <el-table-column prop="bl_pid" label="bug组编号" width="150" sortable>
            </el-table-column>
            <el-table-column prop="bl_content" label="bug内容" width="150" sortable>
            </el-table-column>
            <el-table-column prop="bl_createtime" label="bug创建时间" min-width="140" sortable>
            </el-table-column>
            <!-- <el-table-column label="操作" width="220" fixed="right">
                <template scope="scope">
                    <el-button type="danger" size="small" @click="showDetail(scope.row)">查看</el-button>
                    <el-button type="danger" size="small" @click="handleDetail(scope.row)">完成</el-button>
                    <el-button type="danger" size="small" @click="showEdit(scope.row)">编辑</el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <!-- 分页 -->
        <!-- <el-pagination
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next">
        </el-pagination> -->
    </el-row>
    <el-button type="primary" class="btn" @click="back">
      返回
    </el-button>
  </div>
</template>
<script>
import axios from 'axios'
const ERR_OK = 1
export default {
  data() {
    return {
      // 表格数据存储
      dataList: [],
      modify: [],
      bugsInfo: [],
      pics: false,
      // bug截图url
      img: ''
    }
  },
  created() {
    this._getDataList()
  },
  methods: {
    // 显示bug截图弹框
    showPic() {
      this.pics = !this.pics;
    },
    // 显示详情
    showEdit(index, row) {
      let status = this.bugsInfo.bugs_status
      let id = this.bugsInfo.bugs_id
      let params = [id, status].join('/')
      this.$router.push({
        path: '/editBug',
        name: 'editBug',
        params: {
          uid: params
        }
      })
    },
    //退回上级路由
    back() {
      this.$router.back()
    },
    _getDataList() {
      const url = 'api/bugs/bugsInfo.html'
      const params = {
        bugs_id: this.$route.params.id
      }
      axios.post(url, params).then(res => {
        if (res.data.code === ERR_OK) {
          this.bugsInfo = res.data.data
          this.img = res.data.data.bugs_img
          this.dataList = this._dataListToArray(this.bugsInfo)
          this.modify = this.bugsInfo.logData
        }
      })
    },
    // 转换数据类型
    _dataListToArray(obj) {
      let row = []
      let ret = {
        createTime: obj.bugs_createtime,
        updateTime: obj.bugs_updatetime,
        endTime: obj.bugs_endtime,
        thisNum: obj.bugs_id,
        ansPer: obj.b_su_name,
        bugs_title: obj.bugs_title,
        b_u_name: obj.b_u_name,
        bugs_description: obj.bugs_description,
        status: obj.bugs_status == 1 ? '修复中' : '已完成'
      }
      row.push(ret)
      return row
    }
  }
}
</script>
<style lang="stylus" scoped rel="stylesheet/stylus">
.container
    padding 80px
    text-align center
    .title
        padding-top 20px
    .steps
        padding-top 100px
    .btn
        position absolute
        left 40px
        top 80px
.showpicclass
  position fixed
  top 50px
  width 60%
  height auto
  z-index 1000
  left 50%
  transform translateX(-50%)
</style>
